<template>
  <el-dialog
    :visible.sync="visible"
    title="详情"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="close()"
    :destroy-on-close="true"
    @opened="opened()"
    width="70%"
    top="90px"
  >
    <el-form
      :model="dataForm"
      label-position="right"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      :label-width="$i18n.locale === 'en-US' ? '140px' : '140px'"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="企业名称" prop="name">
            {{ dataForm.name || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商户名称：" prop="">
            {{ dataForm.name || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业法人：" prop="">
            {{ dataForm.legalPerson || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属区域：" prop="">
            {{ dataForm.islandName || "" }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="统一社会信用代码：" prop="">
            {{ dataForm.creditCode || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人身份证号" prop="">
            {{ dataForm.operatorCard || "" }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="地址：" prop="">
            {{ dataForm.provinceName || "" }}{{ dataForm.cityName || "" }}
            {{ dataForm.areaName || "" }}
            {{ dataForm.street || "" }}
            {{ dataForm.areaDetail || "" }}
          </el-form-item>
        </el-col>
        <h3>联系人信息</h3>
        <el-col :span="6">
          <el-form-item label="联系人姓名：" prop="">
            {{ dataForm.linkName || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人号码：" prop="">
            {{ dataForm.linkPhone || "--" }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="管理员用户名：" prop="">
            {{ dataForm.adminName || "--" }}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="管理员密码：" prop="">
            {{ dataForm.adminPassword || "--" }}
          </el-form-item>
        </el-col>
        <h3>资料/照片</h3>
        <el-col :span="8">
          <el-form-item label="营业执照" prop="">
            <img v-if="dataForm.img0" :src="dataForm.img0" class="avatar" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺门头/公司照片" prop="">
            <img v-if="dataForm.img3" :src="dataForm.img3" class="avatar" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="其他相关证件" prop="">
            <img v-if="dataForm.img4" :src="dataForm.img4" class="avatar" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="法人身份证(国徽面)："
            prop=""
            label-width="160px"
          >
            <img v-if="dataForm.img1" :src="dataForm.img1" class="avatar" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="法人身份证(人像面)："
            prop=""
            label-width="160px"
          >
            <img v-if="dataForm.img2" :src="dataForm.img2" class="avatar" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
import mixinRegionModule from "@/mixins/region-module";
export default {
  mixins: [mixinRegionModule],

  data() {
    return {
      selectValue: "1111",
      value: "",
      processOptions: [
        {
          dictValue: "0",
          dictLabel: "待审核",
        },
        {
          dictValue: "1",
          dictLabel: "审核通过",
        },
        {
          dictValue: "2",
          dictLabel: "审核不通过",
        },
      ],
      statusValue: "",
      visible: false,
      dataForm: {
        id: "",
        name: "",
        code: "",
        legalPerson: "",
        operatorType: "",
        operatorName: "",
        operatorUnit: "",
        creditCode: "",
        operatorCardType: "",
        policeCode: "",
        ownerType: "",
        operatorCard: "",
        registerNo: "",
        operateProject: "",
        operateTime: "",
        areaCode: "",
        areaDetail: "",
        isCheckOut: "",
        isNeedCard: "",
        isSettlement: "",
        checkOutTime: "",
        linkName: "",
        linkPhone: "",
        adminName: "",
        adminPassword: "",
        process: "",
        status: "",
        delFlag: "",
        remark: "",
        creator: "",
        createDate: "",
        updater: "",
        updateDate: "",
      },
    };
  },
  props: {
    disabled: Boolean,
  },
  methods: {
    opened() {
      this.provincAreaDetailInfoList();
      if (this.dataForm.city) {
        this.cityAreaDetailInfoList(this.dataForm.province);
      }
      if (this.dataForm.area) {
        this.countyAreaDetailInfoList(this.dataForm.city);
      }
    },
    close() {
      this.dataForm = {
        id: "",
        name: "",
        code: "",
        legalPerson: "",
        operatorType: "",
        operatorName: "",
        operatorUnit: "",
        creditCode: "",
        operatorCardType: "",
        policeCode: "",
        ownerType: "",
        operatorCard: "",
        registerNo: "",
        operateProject: "",
        operateTime: "",
        areaCode: "",
        areaDetail: "",
        isCheckOut: "",
        isNeedCard: "",
        isSettlement: "",
        checkOutTime: "",
        linkName: "",
        linkPhone: "",
        adminName: "",
        adminPassword: "",
        process: "",
        status: "",
        delFlag: "",
        remark: "",
        creator: "",
        createDate: "",
        updater: "",
        updateDate: "",
      };
      this.$emit("changeDisabled");
    },

    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/hotel/homestay/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.dataForm.picList = this.dataForm.picList
            ? this.dataForm.picList
            : [];
          if (this.dataForm.picList) {
            for (let i = 0; i < this.dataForm.picList.length; i++) {
              if (this.dataForm.picList[i].type == 4) {
                this.dataForm.img0 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 1) {
                this.dataForm.img1 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 2) {
                this.dataForm.img2 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 5) {
                this.dataForm.img3 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 0) {
                this.dataForm.img4 = this.dataForm.picList[i].pic;
              }
            }
          }

          // 省市区数据
          if (this.dataForm.city) {
            this.cityAreaDetailInfoList(this.dataForm.province);
          }
          if (this.dataForm.area) {
            this.countyAreaDetailInfoList(this.dataForm.city);
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
h3 {
  padding: 30px 0 15px;
  width: 97%;
  border-bottom: 1px solid #ddd;
  color: #303133;
  margin-left: 1%;
  font-size: 16px;
  overflow: hidden;
}

::v-deep .el-form-item__label {
  color: #111;
}
</style>
